<!--光伏治沙总体目标-->
<template>
  <div>
    <el-card class="box-card" style="height: 535px">
      <div slot="header">
        <span class="header">光伏治沙总体目标</span>
      </div>
      <div>
        <div class="paragraph">
          <div class="spot">1</div>
          <span class="text">光伏装机及发电量。到 2025年，光伏装机2140万千瓦，年发电量约 30亿千瓦时;到2030年，光伏装机8900万千瓦，年发电量 1500亿千瓦时。</span>
        </div>
        <div class="paragraph">
          <div class="spot">2</div>
          <span class="text">生态效益。到 2025 年，完成光伏治沙面积 64万亩;到 2030 年完成光伏治沙面积约 230万亩。</span>
        </div>
      </div>
      <div class="title">“十四五”规划投产光伏治沙项目</div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="sort"
          label="项目分类"
          width="170px"
        >
        </el-table-column>
        <el-table-column
          prop="area"
          label="治理面积(万亩)"
        >
        </el-table-column>
        <el-table-column
          prop="number"
          label="个数"
        >
        </el-table-column>
        <el-table-column
          prop="capacity"
          label="装机容量(万千瓦)"
        >
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card">
      <div slot="header">
        <span class="header">地市项目发电装机容量</span>
      </div>
      <div id="barChart" style="width: 100%;height:260px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'overallObjective',
  data(){
    return{
      tableData:[
        {
          sort:'保障性并网项目',
          area:'10',
          number:'4',
          capacity:'355'
        },
        {
          sort:'国家-二三批大基地项目',
          area:'22',
          number:'9',
          capacity:'765'
        },
        {
          sort:'沙戈荒大基地先导工程',
          area:'11',
          number:'4',
          capacity:'400'
        },
        {
          sort:'市场化并网项目',
          area:'3',
          number:'3',
          capacity:'100'
        },
        {
          sort:'已建成项目',
          area:'18',
          number:'18',
          capacity:'520'
        },
        {
          sort:'"十四五"总计建设项目',
          area:'64',
          number:'38',
          capacity:'2140'
        }
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      //页面大小适配
      var chartDom = document.getElementById('barChart');
      let myChart = echarts.init(chartDom);
      const chartObserver = new ResizeObserver(() => {
        myChart.resize();
      });
      chartObserver.observe(chartDom);
      //图表样式
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('barChart')
      const chart = echarts.init(ctx)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var total = 0;
            for (var i = 0; i < params.length; i++) {
              total += params[i].data;
            }
            return '区域：'+ params[0].name + '<br/>'  + '容量：' + total.toFixed(2)+'GW' + '<br/>' + '项目名称：'+ params[0].seriesName;
          }
        },
        legend: {
          show:false,
          orient: 'vertical',
          data: ['防沙治沙和风电光伏一体化工程', '20万千瓦风电项目','35万千瓦光伏项目','200万千瓦光伏治沙项目','110万千瓦光伏项目','85万千瓦光伏+生态治理项目']
        },
        grid: {
          left: '5%',    // 距离左侧的距离
          right: '5%',   // 距离右侧的距离
          bottom: '5%',  // 距离底部的距离
          top: '5%',     // 距离顶部的距离
          containLabel: true // 包含坐标轴的标签
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            textStyle:{
              fontSize:'12px'
            },
            //color: '#A1A7B3',
            interval: 0, // 横轴信息全部显示
           // rotate: -30, // -30度角倾斜显示
          },
          data: ['锡林郭勒盟', '兴安盟', '通辽市', '赤峰市','乌兰察布市','鄂尔多斯市','巴彦淖尔市','阿拉善盟']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '防沙治沙和风电光伏一体化工程',
            type: 'bar',
            stack: 'total', // 设置堆叠的分组
            data: [1.8, 1.5, 0, 4,3,1,4.8,7.87],
            barWidth: '20px'
          },
          {
            name: '20万千瓦风电项目',
            type: 'bar',
            stack: 'total', // 设置堆叠的分组
            data: [0, 0, 0.4, 0,0,0,0,0]
          },
          {
            name: '35万千瓦光伏项目',
            type: 'bar',
            stack: '总量', // 设置堆叠的分组
            data: [0, 0, 0.7, 0,0,0,0,0]
          },
          {
            name: '200万千瓦光伏治沙项目',
            type: 'bar',
            stack: 'total', // 设置堆叠的分组
            data: [0, 0, 0, 0,0,2,0,0]
          },
          {
            name: '110万千瓦光伏项目',
            type: 'bar',
            stack: 'total', // 设置堆叠的分组
            data: [0, 0, 0, 0,0,1.1,0,0]
          },
          {
            name: '85万千瓦光伏+生态治理项目',
            type: 'bar',
            stack: 'total', // 设置堆叠的分组
            data: [0, 0, 0, 0,0,0,0.85,0]
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 10px;
  overflow-y: auto;
  .header {
    color: #11A983;
  }

  .title{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 12px 0;
  }

  .paragraph{
    margin-top: 14px;

    .spot{
      width: 15px;
      height: 15px;
      border-radius: 50%;
      color: #ffffff;
      background-color: #3db99a;
      text-align: center;
      line-height: 15px;
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
    .text{
      font-size: 14px;
    }
  }

}
</style>
